<template>
	<div>
		<div class="nav">
			<div class="nav_box">
				<img src="../../assets/personIcon/liaotian_02.png"  alt="">
                <p class="nicheng">路上一起走</p>
                <p class="jianjie">简介：一起在路上</p>
                <p class="all">
                	<span class="guanzhu">关注 12</span>
                    <span>粉丝 3</span>
                </p>
                <hr>
			</div>
			<div class="youji">
				<span>全部游记 (18)</span>
				<button>筛选</button>
			</div>

			<div class="quanbu">
				<div class="nav_info">
					<img src="../../assets/personIcon/liaotian_02.png" height="80" width="80" alt="">
				    <h3>路上一起走</h3>
				    <p class="nav_f">5天前 来自 路上 lushang.com</p>
				    <p>秋末的黄昏来得总是很快，还没等山野上被日光蒸发起的水气消散，太阳就落尽了西山。于是，山谷中的岚风带着浓重的凉意，驱赶着白色的雾气，向山下游荡；而山峰的阴影，更快地倒压在村庄上，阴影越来越浓，渐渐和夜色混为一...</p>
				    <hr>
				</div>
				
                 <div class="btn">
                 	<img src="../../assets/smallIcon/share.png" height="33" width="31"  alt="">
                 	<span>1万</span>
                 	<img class ="btn_f"src="../../assets/smallIcon/infromation.png" height="32" width="32" alt="">
                 	<span>4754</span>
                 	<img class="btn_n"src="../../assets/smallIcon/Fabulous.png" height="40" width="40" alt="">
                 	<span>5万</span>
                 </div>
			</div>
			<div class="medium">
            	<div class="medium_info">
            		<img src="../../assets/personIcon/liaotian_02.png" height="80" width="80" alt="">
				    <h3>路上一起走</h3>
				    <p>8-4 来自 路上 lushang.com</p>
				 <div class="medium_f">
					<h5>大草原下次再会吧！！！</h5>
					<img src="../../assets/landscape/picture_ZY01.png" height="230" width="230" alt="">
                    <img src="../../assets/landscape/picture_ZY02.png" height="230" width="230" alt="">
                    <img src="../../assets/landscape/picture_ZY03.png" height="230" width="230" alt="">
                    <hr>
				</div>
            	</div>
			
                 <div class="btn">
                 	<img src="../../assets/smallIcon/share.png" height="33" width="31" alt="">
                 	<span>1万</span>
                 	<img class ="btn_f"src="../../assets/smallIcon/infromation.png" height="32" width="32" alt="">
                 	<span>4754</span>
                 	<img class="btn_n"src="../../assets/smallIcon/Fabulous.png" height="40" width="40" alt="">
                 	<span>5万</span>
                 </div>
			</div>
		</div>
	</div>
</template>

<script>

export default{
	name:"person_page",
	data(){
		return{

		}
	}
}	

</script>
<style scoped lang="less">
.nav_box{
	height:405 / 50rem;
	background-color: #fff;
	text-align: center;
	img{
		width: 144 /50rem;
		height: 144/ 50rem;
		margin-top: 60 /50rem;
		// margin-bottom: 36 /50rem;
	}
	.nicheng{
		font-size: 28 / 50rem;
		margin-top: 40 / 50rem;
	}
	.jianjie{
		font-size: 20 / 50rem;
		margin-top: 20 / 50rem;
	}
	.all{
		margin-top: 20 / 50rem;
		.guanzhu{
			margin-right: 120 / 50rem;
		}
	}
	hr{
		margin-top: 42 / 50rem;
    	border: 1px solid #e6e6e6;
        border-top: none;
	}

}
.youji{
	// margin-top: 10 / 50rem;
	height: 80 / 50rem;
	background-color: #fff;
	span{
		display: inline-block;
        vertical-align: middle;
        font-size: 28 / 50rem;
        margin-top: 27 / 50rem;	
        margin-left: 20 / 50rem;
}
	button{
		width: 100 / 50rem;
        height: 44 / 50rem;
        background: #fff;
        outline: none;
        color: #7dd19d;
        float: right;
        font-size: 18 / 50rem;
        border: 1px solid #7dd19d;
        border-radius: 8 / 50rem;
        margin-right: 20 / 50rem;
        margin-top: 18 / 50rem;
	}
}
.quanbu{
	height: 335 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.nav_info{
		width: 710 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
	}

	img{
		display: inline-block;
		width: 80 / 50rem;
		height: 80 / 50rem;
		margin-top: 20 / 50rem;
	}
	h3{
        margin-left: 100 / 50rem;
        margin-top: -75 / 50rem;
		font-size: 24 / 50rem;
	}
	.nav_f{
		font-size: 18 / 50rem;
		margin-left: 100 / 50rem;
		margin-top: 8 / 50rem;
	}
    p{
    	font-size: 26 / 50rem;
    	margin-top: 20 / 50rem;
    	line-height: 35 / 50rem;
    }
    hr{

    	margin-top: 14 / 50rem;
    	border: 1px solid #e6e6e6;
        border-top: none;
		
    }

}
.btn{
	img{
		display: inline-block;
        vertical-align: middle;
		width: 33 / 50rem;
		height: 33 / 50rem;
		margin-left: 65 / 50rem;
		margin-top: 5/ 50rem; 
	}
	.btn_f{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
		
	}
	.btn_n{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
	}
	span{
		display: inline-block;
        vertical-align: middle;
        font-size: 20 / 50rem;
        margin-left: 20 / 50rem; 
		margin-top: 5 /50rem;
	}
}
.medium{
	height: 464 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.medium_info{
		width: 710 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
	}
	img{
		display: inline-block;
		width: 80 / 50rem;
		height: 80 / 50rem;
		margin-top: 14 / 50rem;
	}
	h3{
        margin-left: 100 / 50rem;
        margin-top: -75 / 50rem;
		font-size: 24 / 50rem;
	}
	p{
		font-size: 18 / 50rem;
		margin-left: 100 / 50rem;
		margin-top: 10 / 50rem;
	}
    h5{
    	font-size: 26 / 50rem;
    	margin-top: 20 / 50rem;
    	line-height: 38 / 50rem;
    }
	.medium_f img{
        width: 230 / 50rem;
        height: 230 / 50rem;
	}
	hr{
		margin-top: 14 / 50rem;
		border: 1px solid #e6e6e6;
        border-top: none;
	}.btn{
	img{
		display: inline-block;
        vertical-align: middle;
		width: 33 / 50rem;
		height: 33 / 50rem;
		margin-left: 65 / 50rem;
		margin-top: 5/ 50rem; 
	}
	.btn_f{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
		
	}
	.btn_n{
		display: inline-block;
        vertical-align: middle;
		margin-left: 150 / 50rem;
	}
	span{
		display: inline-block;
        vertical-align: middle;
        font-size: 20 / 50rem;
        margin-left: 20 / 50rem; 
		margin-top: 5 /50rem;
	}
}

}
</style>